<style lang="less">
  @import '../style/runtodo/items.less';
</style>

<template>
  <div id="items">
    <Row>
      <Col span="12">
        <div v-if="!todoStats" v-for="(item, index) in untodoList" :key="index">
          <Card class="card" :bordered="false" @click.native="changeTodo(index, true)">
            <span
              :class="['checkbox', item.done?'uncheckbox':'checkbox']">
              {{item.todo}}
            </span>
          </Card>
        </div>
        <div v-if="todoStats">
          <Card class="card" :bordered="false" @click.native="changeTodo(index, true)">
            <span class="tip">今天没有任务！</span>
          </Card>
        </div>
      </Col>
      <Col span="12">
        <div v-for="(item, index) in todoList" :key="index">
          <Card class="card" :bordered="false" @click.native="changeTodo(index, false)">
            <span
              :class="['checkbox', item.done?'uncheckbox':'checkbox']">
              {{item.todo}}
            </span>
            <!-- <Button class="delButton" style="float: right;" type="text" shape="circle" icon="md-close"></Button> -->
          </Card>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import * as LocalStorage from './localStorageUtil.js'
export default {
  name: 'items',
  data () {
    return {
      placeholder: 'What is your main focus for today?',
      todoStats: true,
      todo: '',
      todoList: [],
      todoLen: 0,
      untodoList: [],
      untodoLen: 0
    }
  },
  methods: {
    // 初始化todoList
    initTodo () {
      // 未完成任务
      var untodoArr = LocalStorage.getItem('untodoList')
      if (untodoArr) {
        for (let i = 0, len = untodoArr.length; i < len; i++) {
          if (untodoArr[i].done === false) {
            this.untodoLen++
          }
        }
        this.untodoList = untodoArr
      }
      // 已完成任务
      var todoArr = LocalStorage.getItem('todoList')
      if (todoArr) {
        this.todoStats = false
        for (let i = 0, len = todoArr.length; i < len; i++) {
          if (todoArr[i].done === false) {
            this.todoLen++
          }
        }
        this.todoList = todoArr
      }
    },
    addTodo (todo) {
      if (todo !== '') {
        let todoObj = {
          id: this.untodoLen++,
          todo: todo,
          done: false
        }
        // 未完成任务
        var untempList = LocalStorage.getItem('untodoList')
        if (untempList) {
          untempList.push(todoObj)
          LocalStorage.setItem('untodoList', untempList)
          this.untodoList = untempList
        } else {
          var tempData = []
          tempData.push(todoObj)
          LocalStorage.setItem('untodoList', tempData)
          this.untodoList = tempData
        }
        this.todoStats = false
        // this.todo = ''
        // this.$emit('setTodo', '')
      }
    },
    changeTodo (index, done) {
      if (done) {
        this.untodoLen--
        this.untodoList[index].done = true
        this.todoList.push(this.untodoList[index])
        this.untodoList.splice(index, 1)
        LocalStorage.setItem('untodoList', this.untodoList)
        LocalStorage.setItem('todoList', this.todoList)
        if (this.untodoList.length === 0) {
          this.todoStats = true
        } else {
          this.todoStats = false
        }
      }
    },
    delTodoList () {
      // LocalStorage.removeItem('untodoList')
      LocalStorage.removeItem('todoList')
      this.todoList = []
    }
  },
  mounted () {
    this.initTodo()
  }
}
</script>
